import React from 'react';
import './accDetail.scss';
import AreaData from '../../../component/areaData/areaData.js'; //地址库
import utils from '../../../utils/utils';
import cookie from 'react-cookies';
import BMap from 'BMap';
import moment from 'moment';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List, Tabs, Row, Col,Select,DatePicker,Table,Button,Input,Card,Image,Descriptions,Switch } from 'antd';
import { EditOutlined, DeleteOutlined ,SettingOutlined,LoadingOutlined, PlusOutlined ,UploadOutlined} from '@ant-design/icons';
import {getUserPositionInfo,getOptLog,getProjectInfoByAccountId} from '../../../api/accountManage'
import {getPositionById} from '../../../api/account'
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Column } = Table;

class accDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource : [
            
            ],//项目
            uid:'',
            position_id:'',
            dataSource2:[],//变更记录
            depart:'',//部门
            position:'',//岗位
            role_type:'',//角色类型，如果是1不需要展示权限
            state_name:'',//状态
            authData:[],
            user:'',
            phone:''
        
        }
    }

    componentDidMount() {
        var id = this.GetRequest().uid
        var id2 = this.GetRequest().position_id
        this.setState({
            uid: id,
            position_id:id2
        },()=> {
            console.log(this.state.uid,this.state.position_id)
            this.getUserPositionInfo()
            this.getPositionById()
            this.getProject()
            this.getLog()
            
        })
        
       
    }

    GetRequest = () => {
        var url = window.location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    // console.log(GetRequest().userId);  //2
    // 根据用户ID拿项目
    getProject = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            uid:this.state.uid
        }
        getProjectInfoByAccountId(post_data).then(res => {
            if(res.code == 0){
                this.setState({
                    dataSource:res.data
                })
            }
        })

    }
    // 根据uid拿变更记录
    getLog = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            uid:this.state.uid
        }
        getOptLog(post_data).then(res => {
            if(res.code == 0) {
                this.setState({
                    dataSource2:res.data
                })
            }
        })

    }
    // 用户权限
    getPositionById = ()=>{
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            position_id:this.state.position_id
        }
        getPositionById(post_data).then(res => {
            if(res.code == 0){
                this.setState({
                    authData:res.data
                })
            }
        })

    }
    // 用户岗位信息
    getUserPositionInfo=()=> {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            uid:this.state.uid
        }
        getUserPositionInfo(post_data).then(res => {
            if(res.code == 0){
                this.setState({
                    depart:res.data.depart_name,
                    position:res.data.position_name,
                    user:res.data.user_name,
                    phone:res.data.user_phone,
                    role_type:res.data.role_type,
                    state_name:res.data.state_name
                })
            }
        })
    }

    // tabs切换
    callback = (activeKey) => {
        console.log(activeKey)
    }
    // 选择按钮切换
    switchChange = (cek) => {
        console.log(cek)
    }
    // 返回
    toBefore = () => {
        window.location.href='/index/auther/autherAccount'
    }
    
    render() {
        const { dataSource , dataSource2 , depart , position ,user , phone,role_type,state_name,authData} = this.state;
        return (
            <Row className="acc-con">
                    <BreadcrumbNav />
                            <Row  style={{margin:'30px'}}>
                               
                                <Col span={24} >
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span>账号详情</span>
                                    </div>
                                </Col>
                                <Col span={12} className="detailinfo">
                                        <span>账号姓名 : </span><span>{user} （{state_name}）</span>
                                </Col>
                                <Col span={12} className="detailinfo">
                                        <span>手机号码 : </span><span>{phone}</span>
                                </Col>
                                <Col span={24} style={{marginBottom:'30px'}}>
                                    <Card size="small" title="负责项目" style={{ width:'70%' ,background:'#f8f8f8'}}>
                                        <Table  dataSource={dataSource} rowKey={record => record.key} scroll={{ x: '100%' }} pagination={false} locale={{ emptyText: '暂无数据' }}>
                                            
                                            <Column title="项目名称" dataIndex="project_name" width='250px' key='1' className="cole" />
                                            {/* <Column title="所在地" dataIndex="age" width='250px' key='2'  className="cole"/> */}
                                            <Column title="所在地" className="cole" render={record => record.p_province + record.p_city + record.p_area + record.p_address} width='320px' key='4' />
                                        </Table>
                                    </Card>
                                </Col>
                                {role_type == 1?null:
                                    <Col span={24} style={{marginTop:'30px',marginBottom:'30px'}}>
                                        <Card size="small" title="账号权限" style={{ width:'70%',background:'#f8f8f8'}}>
                                            {
                                                authData.map((item,index) =>{
                                                    if(item.children&&item.children!=[]){                                                   
                                                        return (
                                                            <div >
                                                                <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                                {item.children.map((el,i)=> (
                                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'13px'}}>{el.menu_name}</span>
                                                                ))}
                                                            </div>
                                                        )
                                                    }else{
                                                        return (
                                                            <div>
                                                                <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                            </div>
                                                        )
                                                    }
                                                    
                                                })
                                            }
                                            
                                        </Card>
                                    </Col>
                                }
                                {/* {role_type == 1?null:
                                    <Col span={24} style={{marginBottom:'30px'}}>
                                        <Card size="small" title="账号权限" style={{ width:'70%',background:'#f8f8f8'}}>
                                            <div className="autherShow">
                                                <span>所属部门：{depart}</span>
                                                <span>岗位/职务：{position}</span>
                                            </div>
                                            <div className="autherShow">
                                                <span>一级功能模块1：</span>
                                                {authData.map((item,index) => {
                                                    return (
                                                        <span>{item.menu_name}</span>
                                                    )
                                                })}
                                            </div>   
                                            <div className="autherShow">
                                                <span>二级功能模块1：</span>
                                                {authData.map((el,index) => {
                                                    if(el.children&&el.children!=[]){
                                                        return (
                                                            <div style={{display:'inline-block'}}>
                                                                {el.children.map((ele,i) => (
                                                                    <span>{ele.menu_name}</span>
                                                                ))}
                                                            </div>
                                                        )
                                                    }
                                                })}
                                            </div>
                                        </Card>
                                    </Col>
                                } */}
                                <Col span={24} style={{marginBottom:'30px'}}>
                                    <Card size="small" title="账号创建/变更记录" style={{ width:'70%',background:'#f8f8f8' }}>
                                        <Table dataSource={dataSource2} rowKey={record => record.key} scroll={{ x: '100%' }} pagination={false} locale={{ emptyText: '暂无数据' }}>
                                            
                                            <Column title="创建/变更时间" dataIndex="opt_time" width='250px' key='1' className="cole"/>
                                            <Column title="操作人员" dataIndex="opt_user_name" width='200px' key='2' className="cole"/>
                                            <Column title="操作类型" dataIndex="log_type" width='100px' key='3' className="cole"/>
                                            <Column title="变更详情" dataIndex="opt_desc" width='450px' key='4' className="cole"/>
                                           
                                        </Table>
                                    </Card>
                                </Col>
                                <Col span={24} style={{margin:'110px'}}>
                                    <Button type="primary" onClick={this.toBefore.bind(this)} style={{width:'100px',height:'40px',marginRight:'30px',marginLeft:'400px'}}>
                                        返回
                                    </Button>
                                    
                                </Col>
                            </Row>
            </Row>
        )
    }
}

export default accDetail;